<!-- 合同文本 -->
<template>
  <div v-show="setUpList.data">
    <newSetUpForm
      class="aa"
      ref="setUpForm"
      v-model:layout="rest"
      :businessType="businessType"
      @changeSeconds="changeSeconds"
      v-model:set-up-data="setUpList.data"
    ></newSetUpForm>
  </div>
</template>

<script setup lang="ts">
import { GetBusinessModalData } from '@/apis/controltotal';
import { cloneDeep } from 'lodash';
import { changeControlData } from '@/utils/control';
import { useVModel } from '@vueuse/core';
import { GetContractTemplateDetail } from '@/apis/management/contract/baseSetting';
import { GetContractRenewalTemplateDetail } from '@/apis/management/contract/baseSetting';
import newSetUpForm from '@/components/DynamicFormsNew/SetUpForm/index.vue';

const props = withDefaults(
  defineProps<{
    data: any;
  }>(),
  {}
);
const emit = defineEmits(['update:visible', 'update:data', 'handleOk', 'save']);
const formData = useVModel(props, 'data', emit);
const rest = ref('horizontal');
const businessType = ref([
  'baseComponent',
  'SER_FUNC218F8148FCD249D2A3791D31B02669C0'
]);
let setUpForm = ref();
const getControlData = async () => {
  try {
    const record: any = await GetContractRenewalTemplateDetail({
      id: formData.value.baseInfoData.templateId
    });
    record.seconds = record.collectionModel;
    delete record.collectionModel;
    record.seconds.forEach((ele: any) => {
      ele.componentList = ele.controlModel;
      delete ele.componentModel;
      ele.componentList.forEach((item: any) => {
        const {
          ctlCnName,
          ctlEnName,
          ctlComponentType,
          ctlCode,
          ctlFieldName
        } = item;
        item.uuid = ctlCode;
        item.componentName = ctlCnName;
        item.componentType = ctlComponentType;
        item.code = ctlCode;
        item.fieldName = ctlFieldName;
        item.enName = ctlEnName;
      });
    });
    setUpList.data = cloneDeep(record.seconds);
    // 给控件新增子集code
    setUpList.data?.forEach((ele: any) => {
      ele.componentList?.forEach((item: any) => {
        item.subCode = ele.subCode;
        item.collectionId = ele?.id;
      });
    });
    console.log('===================================setUpListsetUpList=');
    console.log(setUpList.data);
    console.log('====================================');
  } catch (error: unknown) {
    console.log(error);
  }
};

// // 控件数据
const setUpList: any = reactive({ data: null });
// 回传控件数据
const changeSeconds = (e: any) => {
  setUpList.data = cloneDeep(e);
};

watch(
  () => props.data.baseInfoData.templateId,
  (newVal) => {
    if (newVal) {
      getControlData();
    }
  }
);

watch(
  () => setUpList.data,
  () => {
    if (Array.isArray(setUpList.data) && !setUpList.data[0]?.id) return;
    // 给控件新增子集code
    setUpList.data?.forEach((ele: any) => {
      ele.componentList?.forEach((item: any) => {
        item.subCode = ele.code;
        item.collectionId = ele.id;
      });
    });
    formData.value.designData = cloneDeep(setUpList.data);
    formData.value.designData.forEach((ele: any) => {
      ele.componentList.forEach((item: any) => {
        item.ctlValue = item.ctlValue || '';
      });
    });
    console.log('==================================213==');
    console.log(formData.value.designData);
    console.log('====================================');
  }
);
// defineExpose({});
</script>

<style lang="less" scoped>
.aa {
  background-color: #eee;
}
</style>
